<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;list-style: none;}
        .app{width: 400px;height: 400px;margin:30px auto;border: 1px solid #ccc;user-select: none;}
        .app ul {display: flex;width: 100%;}
        .app ul li{flex: 1;text-align: center;line-height: 40px;border-bottom: 1px solid #cccccc;cursor: pointer;}
        .active{background-color: #f00;}
        .con>div{text-align: center;line-height: 360px; }
        .con>div img{width: 360px;height: 360px;}
    </style>
</head>
<body>
    <div class="app">
        <ul>
            <li v-for="(item,index) in arr" v-on:click="cur=index" v-bind:class={active:cur==index}> 
                {{item}}
            </li>
        </ul>
        <div class="con">
            <div v-for="(ite,ind) in list" v-show=" cur===ind">
                <img v-bind:src="ite" alt="">
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'.app',
            data:{
                arr:['ll','yj','hs','mt'],
                list:['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.nosdn.127.net%2FMWjB5LdV4Hq%3DbKrKQH3SbUIhr1u83ZrogQCf352oLMMM41528982554352compressflag.jpg&refer=http%3A%2F%2Fdingyue.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634890905&t=2a58dc0e81a84a91eb1696d0b95c17f1',
                'https://img1.baidu.com/it/u=3432174479,1450323813&fm=26&fmt=auto',
                'https://img1.baidu.com/it/u=1059008242,1953666714&fm=26&fmt=auto',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0616%252F4ebed271j00qus86e001ec000hs00kgc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634890973&t=62e1463e67fc9b00e1bf60bf0060a1fd'],
                cur:0
            }

        })
    </script>
</body>
</html>